<template>
  <div>
    <div id="column" :style="{ width: width, height: height }"></div>
  </div>
</template>
<script>
  import echarts from "echarts";
  export default {
    data() {
      return {
        options: {
          xAxis: {
            type: "category",
            data: this.xData,
          },
          yAxis: {
            type: "value",
          },
          series: [{
            name: this.name,
            type: "bar",
            data: this.yData,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            itemStyle: {
              color: "skyblue",
            },
          }, ],
          title: {
            show: true,
            text: this.title,
            subtext: this.time,
          },
          tooltip: {
            trigger: "axis",
            triggerOn: "mousemove",
          },
          label: {
            show: true,
          },
        },
      };
    },
    props: {
      xData: {
        type: Array,
        required: false,
      },
      yData: {
        type: Array,
        required: false,
      },
      width: {
        type: String,
        required: false,
        default: "600px",
      },
      height: {
        type: String,
        required: false,
        default: "400px",
      },
      title: {
        type: String,
        required: false,
        default: "销售统计",
      },
      time: {
        type: String,
        required: false,
        default: '1111-01-01'
      }
    },
    mounted() {
      this.set();
    },
    methods: {
      set() {
        var myEcharts = echarts.init(document.getElementById("column"));
        myEcharts.setOption(this.options);
      },
    },
  };
</script>

<style lang="scss" scoped>
</style>
